<template>
  <div id="mt_app">
    <tabbar id="mt_bottom_tab" :class="{'has-tab': tabShow}">
      <tabbar-item  link="/" :selected="isActive(0)">
        <img slot="icon" src="../../static/icon1.png">
        <img slot="icon-active" src="../../static/icon01.png">
        <span slot="label" >首页</span>
      </tabbar-item>
      <tabbar-item icon-class link="/portal/breed" :selected="isActive(1)">
        <img slot="icon" src="../../static/icon2.png">
        <img slot="icon-active" src="../../static/icon02.png">
        <span slot="label">养殖</span>
      </tabbar-item>
      <tabbar-item link="/portal/market" :selected="isActive(2)">
        <img slot="icon" src="../../static/icon3.png">
        <img slot="icon-active" src="../../static/icon03.png">
        <span slot="label">行情</span>
      </tabbar-item>
      <tabbar-item link="/trade" :selected="isActive(3)">
        <img slot="icon" src="../../static/icon4.png">
        <img slot="icon-active" src="../../static/icon04.png">
        <span slot="label">供求</span>
      </tabbar-item>
      <tabbar-item link="/oauth/home" :selected="isActive(4)">
        <img slot="icon" src="../../static/icon5.png">
        <img slot="icon-active" src="../../static/icon05.png">
        <span slot="label">我</span>
      </tabbar-item>
    </tabbar>
    <transition :name="transitionName">
      <keep-alive :exclude="excludes">
        <router-view id="t_main" :class="{'has-tab': tabShow}"></router-view>
      </keep-alive>
    </transition>
  </div>
</template>

<script>
import { getSlideName } from "@/modules/transition"
import { Tabbar, TabbarItem } from "vux"

export default {
  data() {
    return {
      transitionName: "silde-right",
      releaseshow: false,
      excludes: ["userSupplies", "shops", "userSetting", "supplies", "tradeSearch"]
    }
  },
  methods: {
    getrelease(rel) {
      this.releaseshow = rel
    },
    isActive(index) {
      return index === this.tabActive ? true : false
    }
  },
  watch: {
    $route(to, from) {
      //计算动画效果
      this.transitionName = getSlideName.call(this, to, from)
    }
  },
  computed: {
    tabShow() {
      return this.$store.state.page.tabShow
    },
    tabActive() {
      return this.$store.state.page.tabIndex
    }
  },
  components: { Tabbar, TabbarItem }
}
</script>

<style lang="scss">
body {
  margin: 0;
  -webkit-overflow-scrolling: touch;
}

#mt_bottom_tab {
  visibility: hidden;

  &.has-tab {
    visibility: visible;
  }
}

#t_main {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0px;
  background: #eee;
  overflow-y: scroll;
  -webkit-overflow-y: scroll;

  &.has-tab {
    bottom: 50px;
  }
}

#t_main::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: #fff;
}
.silde-right-enter-active {
  transform: translate3d(100%, 0, 0);
}

.silde-right-enter-to {
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  transform: translateZ(0);
}

.silde-right-leave-to {
  transition: all 0.45;
}

.silde-left-enter-active {
  transform: translate3d(-100%, 0, 0);
}

.silde-left-enter-to {
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  transform: translateZ(0);
}

.silde-left-leave-to {
  transition: all 0.45s;
}
.inf-release-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: auto;
  top: 0;
  left: 0;
  background: rgba(7, 17, 27, 0.8);
  z-index: 1000;
}

.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon,
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i,
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
  color: #008cf0 !important;
}

@import "../../styles/index.scss";

.vux-normal-header {
  background: #fff !important;

  .vux-header-back,
  .left-arrow {
    color: $primary-font-color !important;

    &::before {
      border-color: $primary-font-color !important;
    }
  }
}
</style>